<template>
	<view class="page">
		<view class=" title" @tap="choice">
			选择类型
		</view>
		<view class="cueentobj" v-if="current=='添加客户'">
			<view class="tit_yiyuan">
				{{current}}
			</view>
			<view class="grid">
				<view class="name">
					客户名称：
				</view>
				<view class="input">
					<input type="text" value="" v-model="hsopital.name" placeholder="请输入客户名称" />
				</view>
			</view>
			<view class="grid">
				<view class="name">
					客户电话：
				</view>
				<view class="input">
					<input type="text" value="" v-model="hsopital.mobile" placeholder="请输入客户电话" />
				</view>
			</view>
		</view>
		<view class="cueentobj" v-else-if="current=='添加科室'">
			<view class="tit_yiyuan">
				{{current}}
			</view>
			<view class="grid">
				<view class="name">
					客户名称：
				</view>
				<view class="input">
					<xfl-select :list="list" :clearable="false" :showItemNum="5" :listShow="false" :isCanInput="true"
						:style_Container="'height: 80rpx; font-size: 16px;width:100%'" :placeholder="'请选择客户'"
						:focusShowList='"showList1Hospilal"' @input='manualSerachHospital()' :selectHideType="'hideAll'"
						@change='hospitalEven()'>
					</xfl-select>
				</view>
			</view>
			<view class="grid">
				<view class="name">
					科室名称：
				</view>
				<view class="input">
					<input type="text" value="" v-model="department.name" placeholder="请输入科室名称" />
				</view>
			</view>
			<view class="grid">
				<view class="name">
					绑定工程师：
				</view>
				<view class="input">
					<xfl-select :list="list1" :clearable="false" :showItemNum="5" :listShow="false" :isCanInput="true"
						:style_Container="'height: 80rpx; font-size: 16px;width:100%'" :placeholder="'请选择工程师'"
						:focusShowList='"showList1Hospilal"' @input='manualSerachEngineer()' :selectHideType="'hideAll'"
						@change='engineerEven()'>
					</xfl-select>
				</view>
			</view>
		</view>
		<view class="cueentobj" v-else-if="current=='添加设备'" style="padding-bottom: 200rpx;">
			<view class="tit_yiyuan">
				{{current}}
			</view>

			<view class="grid">
				<view class="name">
					请选择客户：
				</view>
				<view class="input">
					<xfl-select :list="list" :clearable="false" :showItemNum="5" :listShow="false" :isCanInput="true"
						:style_Container="'height: 80rpx; font-size: 16px;width:100%'" :placeholder="'请选择客户'"
						:focusShowList='"showList1Hospilal"' @input='manualSerachHospital()' :selectHideType="'hideAll'"
						@change='hospitalEven()'>
					</xfl-select>
				</view>
			</view>
			<view class="grid">
				<view class="name">
					请选择科室：
				</view>
				<view class="input">
					<xfl-select :list="list2" :clearable="false" :showItemNum="5" :listShow="false" :isCanInput="true"
						:focusShowList='"showList2Hospilal"'
						:style_Container="'height: 80rpx; font-size: 16px;width:100%'" :placeholder="'请选择科室'"
						@change='departmentEven()' @input='manualSerachDepartment()'>
					</xfl-select>
				</view>
			</view>
			<view class="grid">
				<view class="name">
					请选择类别：
				</view>
				<view class="dis">
					<view class="input">
						<xfl-select :list="classlistCopy1" :clearable="false" :showItemNum="5" :listShow="false"
							:isCanInput="true" :focusShowList='"showList3Hospilal"'
							:style_Container="'height: 80rpx; font-size: 16px;width:100%'" :placeholder="'请选择类别'"
							@change='getClass1()' @input='getName1()'>
						</xfl-select>
					</view>
					<view class="jia" @click="getType(1)">
						<image src="../../static/jia.png" />
					</view>
				</view>
			</view>
			<view class="grid">
				<view class="name">
					请选择品牌：
				</view>
				<view class="dis">
					<view class="input">
						<xfl-select :list="classlistCopy2" :clearable="false" :showItemNum="5" :listShow="false"
							:isCanInput="true" :focusShowList='"showList4Hospilal"'
							:style_Container="'height: 80rpx; font-size: 16px;width:100%'" :placeholder="'请选择品牌'"
							@change='getClass2()' @input='getName2()'>
						</xfl-select>
					</view>
					<view class="jia" @click="getType(2)">
						<image src="../../static/jia.png" />
					</view>
				</view>
			</view>
			<view class="grid">
				<view class="name">
					请选择型号：
				</view>
				<view class="dis">
					<view class="input">
						<xfl-select :list="classlistCopy3" :clearable="false" :showItemNum="5" :listShow="false"
							:isCanInput="true" :focusShowList='"showList5Hospilal"'
							:style_Container="'height: 80rpx; font-size: 16px;width:100%'" :placeholder="'请选择型号'"
							@change='getClass3()' @input='getName3()'>
						</xfl-select>
					</view>
					<view class="jia" @click="getType(3)">
						<image src="../../static/jia.png" />
					</view>
				</view>
			</view>
			<view class="grid">
				<view class="name">
					设备序列号：
				</view>
				<view class="input">
					<input type="text" value="" v-model="equipment.serial" placeholder="请输入设备序列号" />
				</view>
			</view>
			<view class="grid">
				<view class="name">
					生产时间：
				</view>
				<view class="input">
					<picker mode="date" :value="equipment.create_date" @change="extraChange" fields="day">
						<input type="text" placeholder="请选择设备生产时间" v-model="equipment.create_date" disabled
							placeholder-style="font-size: 28rpx;color: #969699;" />
					</picker>
					<image src="../../static/del.png" mode="" v-if="equipment.create_date" @click="extraDel"
						class="del">
					</image>
				</view>
			</view>
			<view class="grid">
				<view class="name">
					使用年限：
				</view>
				<view class="input">
					<input type="text" value="" v-model="equipment.use_year" placeholder="请输入设备使用年限" />
				</view>
			</view>
			<view class="grid">
				<view class="name">
					软件版本：
				</view>
				<view class="input">
					<input type="text" value="" v-model="equipment.software_version" placeholder="请输入软件版本" />
				</view>
			</view>
			<view class="oppo" style="margin-top: 0;">
				<view class="name" style="display: flex;align-items: center;justify-content: space-between;">
					<view>所属附件<text style="color: #bbb">(保修设备必须上传所属附件)</text>：</view>
					<view class="jia" @click="getType(4)">
						<image src="../../static/jia.png" />
					</view>
				</view>
				<view class="name">
					<view class="colLine" style="display: flex;align-items: center;justify-content: flex-start;"
						v-if="fileList.length>0">
						<view class="col">
							型号
						</view>
						<view class="col">
							序列号
						</view>
						<view class="col2">
							张数
						</view>
					</view>
					<view class="colLine" style="display: flex;align-items: center;justify-content: flex-start;"
						v-for="(i,index) in fileList" @tap.stop="getType(5,i)">
						<view class="col">
							{{i.marking}}
						</view>
						<view class="col">
							{{i.serial}}
						</view>
						<view class="col2">
							{{i.imgs_list.length||0}}
						</view>
						<image src="../../static/del.png" class="del_List" @tap.stop="del_List(index)" />
					</view>
				</view>
			</view>
		</view>
		<view class="submit" @tap="addnow">
			立即添加
		</view>
		<u-popup :show="showType" mode="center" @close="close" @open="open" :round="20">
			<view class="p_30 pop">
				<view class="grid" v-if="showType_num == 1 ">
					<view class="name">
						类别：
					</view>
					<view class="input">
						<input type="text" value="" v-model="className" placeholder="请输入名称" />
					</view>
				</view>
				<view class="grid" v-if="showType_num == 2 || showType_num == 3 ">
					<view class="name">
						类别：
					</view>
					<view class="input">
						<xfl-select :list="classlistCopy1" :clearable="false" :showItemNum="5" :listShow="false"
							:isCanInput="true" :focusShowList='"showList2Hospilal"'
							:style_Container="'height: 80rpx; font-size: 16px;width:100%'" :placeholder="'请选择类别'"
							@change='getClass1()' @input='getName1()'>
						</xfl-select>
					</view>
				</view>
				<view class="grid" v-if="showType_num == 2">
					<view class="name">
						品牌：
					</view>
					<view class="input">
						<input type="text" value="" v-model="className" placeholder="请输入名称" />
					</view>
				</view>
				<view class="grid" v-if="showType_num == 3">
					<view class="name">
						品牌：
					</view>
					<view class="input">
						<xfl-select :list="classlistCopy2" :clearable="false" :showItemNum="5" :listShow="false"
							:isCanInput="true" :focusShowList='"showList2Hospilal"'
							:style_Container="'height: 80rpx; font-size: 16px;width:100%'" :placeholder="'请选择品牌'"
							@change='getClass2()' @input='getName2()'>
						</xfl-select>
					</view>
				</view>
				<view class="grid" v-if="showType_num == 3">
					<view class="name">
						型号：
					</view>
					<view class="input">
						<input type="text" value="" v-model="className" placeholder="请输入设备型号" />
					</view>
				</view>
				<view class="grid" v-if="showType_num == 4 || showType_num == 5">
					<view class="name">
						型号：
					</view>
					<view class="input">
						<input type="text" value="" v-model="fileInfo.marking" placeholder="请输入设备型号" />
					</view>
					<view class="name">
						序列号：
					</view>
					<view class="input">
						<input type="text" value="" v-model="fileInfo.serial" placeholder="请输入附件序列号" />
					</view>
				</view>
				<view class="oppo" v-if="showType_num == 4|| showType_num == 5">
					<view class="name">
						附件图片（选填）：
					</view>
					<view class="oppo-w-q">
						<view class="oppo-w-q-i">
							<view class="oppo-w-q-i-a" v-for="(item, index) in fileInfo.imgs_list" :key="index">
								<image :src="item" style="width: 100%; height: 100%; z-index: 99"
									@click="preImage(index)" />
								<image src="../../static/del.png" class="del" @tap="del_img(index)" />
							</view>
							<view class="oppo-w-q-i-c" v-if="fileInfo.imgs_list.length < 3" @tap="upImgs">
								<image src="../../static/camera.png" class="img" />
							</view>
						</view>
						<view class="oppo-w-q-p"> 支持上传3张jpg/png </view>
					</view>
				</view>
			</view>
			<view class="dis" style="padding: 0 30rpx;">
				<view class="btn" @click="showType = false">
					取消
				</view>
				<view class="btn2" @click="addClass(showType_num)">
					确定
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import xflSelect from '@/components/xfl-select/xfl-select.vue';
	import baseUrl from "@/request/baseUrl.js";
	export default {
		components: {
			xflSelect //注册为子组件
		},
		data() {
			return {
				fileList: [],
				fileInfo: {},
				showType: false,
				showType_num: 0,
				current: '',
				hospital_name: '',
				department_name: '', // 搜索科室名称
				equipment: {
					name: '', // 
					// marking: '', // 设备型号
					serial: '', // 设备序列号
					software_version: '', // 软件版本
					use_year: '',
					create_date: '',
					enclosure: '', // 附件说明
					hospital_id: null, // 客户id
					department_id: null, // 科室id
					enclosure_data: null,
					enclosure_picture: '', // 附件图片
					one_class_id: null,
					two_class_id: null,
					three_class_id: null
				},
				hsopital: {
					name: '',
					mobile: ''
				}, //客户新增
				department: {
					name: '',
					hospital_id: '',
					user_id: ''
				}, //科室新增
				list: [], //客户列表用于展示
				hospital_list: [], //客户列表存数据
				list1: [], //工程师列表展示
				engineer_list: [], //工程师列表存数据	
				list2: [], //科室展示
				departmentList: [], //科室列表存数据
				imgs_list: [], // 附件图片列表
				brandList: [],
				varyList: [],
				classlist1: [],
				classlistCopy1: [],
				classlist2: [],
				classlistCopy2: [],
				classlist3: [],
				classlistCopy3: [],
				classType: 1,
				className: null,
				nameSearch: ''
			}
		},
		onLoad() {

		},
		onShow() {
			// this.current = '添加设备'
		},
		watch: {
			current(n, o) {
				if (n == '添加科室') {
					this.list = []
					this.hospital_list = []
					this.hospital_name = ''
					this.getHospital()
					this.engineerlist()
				} else if (n == '添加设备') {
					this.list = []
					this.hospital_list = []
					this.hospital_name = ''
					this.getHospital()
					this.getBrand()
					this.getVariety()
				}
			},
			'equipment.hospital_id'(n, o) {
				if (this.current == '添加设备') {
					this.list2 = []
					this.departmentList = []
					this.getDepartment()
				}
			},
			/* hospital_name(n,o){
				if(this.current=='添加设备'&&this.hospital_name!=''){
					this.list2=[]
					this.departmentList=[]
					this.equipment.hospital_id=null
					this.getDepartment()
				}
			} */
		},
		methods: {
			/* 选择客户 */
			hospitalEven(e) {
				if (this.current == '添加科室') {
					this.department.hospital_id = this.hospital_list.find(item => item.name == e.orignItem).id
				} else {
					this.$children[2].onClear()
					this.equipment.hospital_id = this.hospital_list.find(item => item.name == e.orignItem).id
				}
			},
			/* 选择工程师 */
			engineerEven(e) {
				this.department.user_id = this.engineer_list.find(item => item.nickname == e.orignItem).id
			},
			getName1(e) {
				this.nameSearch = e.detail.value
				this.classlistCopy2 = []
				this.$children[4].onClear()
				if (this.showType_num == 2 || this.showType_num == 3) {
					this.$children[0].$children[3] ? this.$children[0].$children[3].onClear() : ""
				}
				this.equipment.one_class_id = ""
				this.getClasslist(1)

			},
			getName2(e) {
				this.nameSearch = e.detail.value
				this.$children[5].onClear()
				if (this.showType_num == 3) {
					this.$children[0].$children[4] ? this.$children[0].$children[4].onClear() : ''
				}
				this.equipment.two_class_id = ''
				this.classlistCopy3 = []
				this.getClasslist(2)
			},
			getName3(e) {
				this.nameSearch = e.detail.value
				this.getClasslist(3)
			},
			// 获取分类
			getClasslist(class_num) {
				console.log(this.nameSearch, '---------')
				this.classType = class_num == 2 ? this.equipment.one_class_id : (class_num == 3 ? this.equipment
					.two_class_id : '')
				this.$https.get('/equipmentclass/classlist', {
					class_num,
					pid: this.classType,
					name: this.nameSearch || ''
				}).then(res => {
					switch (class_num) {
						case 1:
							this.classlist1 = res.data
							this.classlistCopy1 = []
							res.data.forEach(item => {
								this.classlistCopy1.push(item.name)
							})
							this.nameSearch = ""
							break;
						case 2:
							this.classlist2 = res.data
							this.classlistCopy2 = []
							res.data.forEach(item => {
								this.classlistCopy2.push(item.name)
							})
							this.nameSearch = ""
							break;
						case 3:
							this.classlist3 = res.data
							this.classlistCopy3 = []
							res.data.forEach(item => {
								this.classlistCopy3.push(item.name)
							})
							this.nameSearch = ""
							break;
						default:
							break;
					}
				})
			},
			getType(e, i) {
				if (e == 2 || e == 3) {
					this.$children[0].$children[2] ? this.$children[0].$children[2].onClear() : ""
					this.$children[0].$children[3] ? this.$children[0].$children[3].onClear() : ""
				}
				if (e == 3) {
					this.$children[0].$children[4] ? this.$children[0].$children[4].onClear() : ''
				}

				this.showType_num = e
				this.className = ""
				if (e == 4) {
					this.fileInfo = {
						marking: null,
						serial: null,
						imgs_list: []
					}
				} else if (e == 5) {
					console.log(i, '8888888888')
					this.fileInfo = i
				}
				this.showType = true

				// this.getClasslist(this.showType_num)
			},
			getClass1(e) {
				this.$children[4].onClear()
				if (this.showType_num == 2 || this.showType_num == 3) {
					this.$children[0].$children[3] ? this.$children[0].$children[3].onClear() : ""
				}
				this.equipment.one_class_id = this.classlist1.find(item => item.name == e.orignItem).id
				this.getClasslist(2)
			},
			getClass2(e) {
				this.$children[5].onClear()
				if (this.showType_num == 3) {
					this.$children[0].$children[4] ? this.$children[0].$children[4].onClear() : ''
				}
				this.equipment.two_class_id = this.classlist2.find(item => item.name == e.orignItem).id
				this.getClasslist(3)
			},
			getClass3(e) {
				this.equipment.three_class_id = this.classlist3.find(item => item.name == e.orignItem).id
			},
			addClass(class_num) {
				console.log(class_num,'-----名称--------',this.className)
				if (class_num != 4) {
					if (class_num == 2 && !this.equipment.one_class_id) {
						uni.showToast({
							title: '请选择品牌！',
							icon: "error",
						});
						return
					} else if (class_num == 3) {
						if (!this.equipment.one_class_id) {
							uni.showToast({
								title: '请选择品牌！',
								icon: "error",
							});
							return
						}
						if (!this.equipment.two_class_id) {
							uni.showToast({
								title: '请选择类别！',
								icon: "error",
							});
							return
						}
					}
					
					if (!this.className || this.className == "") {
						if(class_num != 5){
							uni.showToast({
								title: class_num == 3 ? '型号不能为空！' : '名称不能为空！',
								icon: "error",
							});
							return
						}else{
							if(!this.fileInfo.marking){
								uni.showToast({
									title: '请输入附件型号！',
									icon: "error",
								});
								return
							}
							if(!this.fileInfo.serial){
								uni.showToast({
									title: '请输入附件序列号！',
									icon: "error",
								});
								return
							}
						}
						
					}
					this.$https.post('/equipmentclass/addclass', {
						class_num,
						name: this.className,
						pid: class_num == 2 ? this.equipment.one_class_id : (class_num == 3 ? this.equipment
							.two_class_id : '')
					}).then(res => {
						if (res.code == 1) {
							this.showType = false
							this.getClasslist(class_num)
							uni.showToast({
								title: res.msg,
								icon: "none",
							});
						} else {
							uni.showToast({
								title: res.msg,
								icon: "error",
							});
						}
					})
				} else  {
					if(!this.fileInfo.marking){
						uni.showToast({
							title: '请输入附件型号！',
							icon: "error",
						});
						return
					}
					if(!this.fileInfo.serial){
						uni.showToast({
							title: '请输入附件序列号！',
							icon: "error",
						});
						return
					}
					this.fileInfo.id = Date.now()
					this.fileList.push({
						...this.fileInfo
					})
					this.showType = false
				}

			},
			/* 选择科室 */
			departmentEven(e) {
				this.equipment.department_id = this.departmentList.find(item => item.name == e.orignItem).id
			},
			del_List(i) {
				console.log(this.fileList, 'fileInfo-----------', i)
				this.fileList.splice(i, 1);
			},
			/* 删除照片 */
			del_img(i) {
				this.fileInfo.imgs_list.splice(i, 1);
			},
			// 切换日期
			extraChange(e) {
				this.equipment.create_date = e.detail.value;
			},
			// 重置
			extraDel() {
				this.equipment.create_date = ''
			},
			/* 图片预览 */
			preImage(current) {
				uni.previewImage({
					current,
					urls: this.fileInfo.imgs_list,
				});
			},
			/* 图片上传 */
			upImgs() {
				const token = uni.getStorageSync("userInfo").token;
				uni.chooseImage({
					count: 9 - this.fileInfo.imgs_list.length,
					sourceType: ["album", "camera"], // album 从相册选图，camera 使用相机，默认二者都有
					success: (res) => {
						res.tempFilePaths.forEach((item) => {

							uni.uploadFile({
								url: `${baseUrl}api/common/upload`,
								filePath: item,
								name: "file",
								formData: {
									token: token, // 上传附带参数
								},
								success: (res1) => {
									if (res1.data.code == 0) {
										uni.showToast({
											title: res1.data.msg,
											icon: "error",
										});
									} else {

										let img = JSON.parse(res1.data).data.fullurl;
										this.fileInfo.imgs_list.push(img);
									}
								},
								fail: () => {
									uni.showToast({
										title: "上传失败",
										icon: "error",
									});
								},
							});
						});
					},
					fail: () => {
						uni.showToast({
							title: "上传失败",
							icon: "error",
						});
					},
				});
			},
			/* 工程师列表 */
			engineerlist() {
				this.$https.post('/hospital/getengineer', {
					nickname: this.nickname
				}).then(res => {
					this.engineer_list = res.data
					this.list1 = []
					res.data.forEach(item => {
						this.list1.push(item.nickname)
					})
				})
			},
			/* 手动搜索工程师 */
			manualSerachEngineer(e) {
				if (e.detail.value == '')
					this.nickname = e.detail.value
				this.engineerlist()
			},

			/* 手动搜索客户 */
			manualSerachHospital(e) {
				this.hospital_name = e.detail.value
				this.getHospital()
			},
			/* 手动搜索科室 */
			manualSerachDepartment(e) {
				this.department_name = e.detail.value
				this.getDepartment()
			},
			/* 获取客户列表 */
			getHospital() {
				this.$https.post('/hospital/search', {
					name: this.hospital_name
				}).then(res => {
					this.hospital_list = res.data
					this.list = []
					res.data.forEach(item => {
						this.list.push(item.name)
					})
				})
			},
			/* 获取科室列表 */
			getDepartment() {
				this.$https.post('/phase/getDepartment', {
					hospital_id: this.equipment.hospital_id,
					name: this.department_name
				}).then(res => {
					this.list2 = []
					this.departmentList = res.data
					res.data.forEach(item => {
						this.list2.push(item.name)
					})
				})
			},
			/* 获取品牌列表 */
			getBrand() {
				this.brandList = ['品牌1', '品牌2', '品牌3']
			},
			/* 获取类别列表 */
			getVariety() {
				this.varyList = ['类别1', '类别2', '类别3']
			},
			/*  */
			choice() {
				uni.showActionSheet({
					itemList: ['添加客户', '添加科室', '添加设备'],
					success: res => {
						if (res.tapIndex == 0) {
							this.current = '添加客户'
						} else if (res.tapIndex == 1) {
							this.current = '添加科室'
						} else if (res.tapIndex == 2) {
							this.current = '添加设备'
							this.getClasslist(1)
						}
					},
					fail: function(res) {
						uni.showToast({
							title: '选择失败，请重试！',
							icon: 'none',
						})
					}
				});
			},
			addnow() {
				switch (this.current) {
					case '添加客户':
						// if (!(/^1[3456789]\d{9}$/.test(this.hsopital.mobile))) {
						// 	uni.showToast({
						// 		title: '手机号码格式错误，请重试！',
						// 		icon: 'none'
						// 	})
						// 	return false;
						// }
						this.$https.post('/hospital/add', this.hsopital).then(res => {
							if (res.msg == '成功') {
								uni.showToast({
									title: '添加客户成功！',
									icon: 'none'
								})
							} else {
								uni.showToast({
									title: '添加客户失败，请重试！',
									icon: 'none'
								})
							}
						})
						break
					case '添加科室':
						this.$https.post('/hospital/addDepar', this.department).then(res => {
							if (res.msg == '成功') {
								uni.showToast({
									title: '添加科室成功！',
									icon: 'none'
								})
							} else {
								uni.showToast({
									title: '添加科室失败，请重试！',
									icon: 'none'
								})
							}
						})
						break
					case '添加设备':
						this.fileList = this.fileList.map(item => {
							return {
								...item,
								images: item.imgs_list && item.imgs_list.length > 0 ? item.imgs_list.join(',') : ''
							}
						})

						delete this.fileList.imgs_list
						
						this.equipment.enclosure_data = this.equipment.enclosure ? 0 : 1;
						if (this.fileInfo.imgs_list && this.fileInfo.imgs_list.length) {
							this.equipment.enclosure_picture = this.imgs_list.toString();
						} else {
							this.equipment.enclosure_picture = ''
						}
						setTimeout(()=>{
							this.equipment.attachment = this.fileList
							this.$https.post('/hospital/addEquip', this.equipment).then(res => {
								console.log(res)
								if (res.msg == '成功') {
									uni.showToast({
										title: '添加设备成功！',
										icon: 'none'
									})
									setTimeout(() => {
										uni.reLaunch({
											url: './code?imgCode='+ res.data
										})
									}, 1000)
								} else {
									uni.showToast({
										title: '添加设备失败，请重试！',
										icon: 'none'
									})
								}
							})
						},500)
						
						break
				}
			}


		}
	}
</script>

<style lang="scss" scoped>
	.grid {
		grid-template-columns: 200rpx 1fr !important;
	}

	.colLine {
		height: 56rpx;
	}

	.pop {
		.grid {
			grid-template-columns: 120rpx 1fr !important;

			.input {
				width: 100% !important;
			}
		}
	}

	textarea {
		margin-top: 10px;
		min-height: 100rpx;
		max-height: 200rpx;
	}

	.dis {
		display: flex;
		justify-content: space-between;
		align-items: center;

		.input {
			width: 81% !important;
		}
	}

	.jia {
		width: 13%;

		image {
			width: 50rpx;
			height: 50rpx;
		}

	}

	.submit {
		width: 622rpx;
		height: 80rpx;
		border-radius: 80rpx;
		background-color: $public-oclor;
		line-height: 80rpx;
		text-align: center;
		color: #FFFFFF;
		margin: 30rpx auto;
		position: fixed;
		bottom: 0px;
		left: 50%;
		transform: translateX(-50%);
	}

	.col {
		width: 33%;
		text-align: left;
		margin-left: 10px;
	}

	.col2 {
		width: 12%;
		text-align: left;
	}

	.btn,
	.btn2 {
		margin: 20rpx;
		width: 220rpx;
		text-align: center;
		padding: 14rpx 22rpx;
		display: inline-block;
		font-size: 26rpx;
		font-weight: 600;
		background-color: #333;
		color: #fff;
		border-radius: 10rpx;
		line-height: 33rpx;
	}

	.btn2 {
		background-color: $public-oclor;
		color: #fff;
	}

	input {
		border-bottom: 2rpx solid #3B3D3D;
		height: 80rpx;
		margin-right:100rpx;
	}

	.oppo {
		background-color: none;
		align-items: center;
		color: #3B3D3D;
		font-weight: 500;
		background-color: #fff;
		font-size: 28rpx;
		padding: 10rpx;
		margin-top: 100rpx;
		// border-bottom: 2rpx solid #3B3D3D;

		&:last-child {
			// padding-bottom: 100rpx;
		}

		&-w {
			border-bottom: 20rpx solid #f6f7fb;

			&-q {
				padding: 30rpx 0 0;

				&-p {
					font-size: 28rpx;
					color: #b6bdbd;
					line-height: 33rpx;
					margin: 20rpx 0;
				}

				&-i {
					display: flex;

					&-a {
						width: 160rpx;
						height: 160rpx;
						background: #f5f6f8;
						margin-right: 20rpx;
						border-radius: 4rpx;
						position: relative;

						image {
							border-radius: 4rpx;
						}
					}

					&-b {
						width: 160rpx;
						height: 160rpx;
						background: #f5f6f8;
						margin: 0 16rpx;
					}

					&-c {
						width: 160rpx;
						height: 160rpx;
						background: #f5f6f8;
						position: relative;

						.img {
							width: 60rpx;
							height: 60rpx;
							position: absolute;
							left: 50%;
							top: 50%;
							margin-top: -30rpx;
							margin-left: -30rpx;
						}
					}
				}
			}
		}
	}

	.del_List {
		width: 36rpx;
		height: 36rpx;
		margin-left: 10px;
	}

	.del {
		position: absolute;
		width: 36rpx;
		height: 36rpx;
		top: 0rpx;
		right: 0rpx;
		border-radius: 50% !important;
		background-color: #ffffff;
		z-index: 99999;
	}

	.grid {
		padding: 10rpx;
		display: grid;
		grid-template-columns: 270rpx 1fr;
		background-color: none;
		align-items: center;
		color: #3B3D3D;
		font-weight: 500;
		background-color: #fff;
		font-size: 28rpx;
		height: 80rpx;

	}

	.tit_yiyuan {
		padding: 20rpx 32rpx;
		background: linear-gradient(91deg, #e2ecfb 0%, rgba(255, 255, 255, 0) 100%);
		font-size: 28rpx;
		font-weight: 600;
		color: #6AA6FA;
		line-height: 33rpx;
	}

	.page {
		box-sizing: border-box;

	}

	.title {
		margin: 32rpx;
		padding: 20rpx 32rpx;
		display: inline-block;
		/* 		background: linear-gradient(86deg, rgba(226, 140, 129, 0.15) 0%, rgba(226, 140, 129, 0) 100%); */
		font-size: 28rpx;
		font-weight: 600;
		background-color: #1A66FF;
		color: #fff;
		border-radius: 10rpx;
		line-height: 33rpx;
	}
</style>